---
id: tooltip
title: Tooltip
description: A label that provides information on hover or focus.
---

<ComponentPreview id="Tooltip" />

## Anatomy

To set up the tooltip correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="tooltip" />

## Examples

Learn how to use the `Tooltip` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Controlled Tooltip

To create a controlled Tooltip component, manage the state of whether the tooltip is open using the `open` prop:

<Example id="controlled" />

### Using a Render Function

For more control over the Tooltip's functionality, you can use a function as a child, which provides access to the
Tooltip API:

<Example id="render-fn" />

### Adding an Arrow

To display an arrow pointing to the trigger from the tooltip, use the `Tooltip.Arrow` and `Tooltip.ArrowTip` components:

<Example id="arrow" />

### Configuring Delay Timings

To configure the delay timings for the Tooltip, use the `closeDelay` and `openDelay` props:

<Example id="timings" />

### Custom Positioning

To customize the position of the Tooltip relative to the trigger, use the `positioning` prop:

<Example id="positioning" />

### Using the Root Provider

The `RootProvider` component provides a context for the tooltip. It accepts the value of the `useTooltip` hook. You can
leverage it to access the component state and methods from outside the tooltip.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## API Reference

### Props

<ComponentTypes id="tooltip" />

### Context

These are the properties available when using `Tooltip.Context`, `useTooltipContext` hook or `useTooltip` hook.

<ContextType id="tooltip" />

## Accessibility

Complies with the [Tooltip WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/).

### Keyboard Support

<KeyBindingsTable id="tooltip" />
